<template>
  <d2-container>
    <template slot="header">
      <el-form
        :gutter="24"
        @submit.native.prevent
        ref="search-box"
        :model="mainQuery"
        label-width="auto"
        label-position="left"
        :inline="true"
      >
        <el-form-item label="商户号" size="mini">
          <el-input
            placeholder=""
            v-model="mainQuery.mchNo"
            @keyup.enter.native="handleSearch"
            clearable
          ></el-input>
        </el-form-item>

        
      </el-form>

      <div class="search-btn-box">
        <div class="left">
          <el-button-group>
            <el-tooltip
              :disabled="!!mainTable.current"
              content="请选择一行数据"
            >
              <el-button
                class="filter-item"
                icon="el-icon-edit"
                type="default"
                @click="handleAction"
                :disabled="mainTable.current && !mainTable.current.settleCurrency"
                :loading="mainTable.loading"
                size="mini"
                v-if="
                  $options.filters['checkButtonAccess'](
                    'eventOrder-add'
                  )
                "
                >冻结/解冻/扣款/充值</el-button
              >
            </el-tooltip>
            <el-button
              class="filter-item"
              icon="el-icon-download"
              size="mini"
              @click="handleExportExcel"
              >导出</el-button
            >
          </el-button-group>
        </div>
        <div class="right">
          <el-button
            class="filter-item"
            icon="el-icon-refresh"
            type="default"
            @click="resetMainData"
            :loading="mainTable.loading"
            size="mini"
            >重置</el-button
          >
          <el-button
            class="filter-item"
            icon="el-icon-search"
            type="primary"
            @click="handleSearch"
            :loading="mainTable.loading"
            size="mini"
            >查询</el-button
          >
        </div>
      </div>
    </template>

    <!--主列表数据-->
    <d2-crud
      ref="d2Crud"
      :options="mainTable.options"
      :index-row="mainTable.indexRow"
      :columns="mainTable.columns"
      :data="mainTable.list"
      :selection-row="mainTable.allowSelect"
      :loading="mainTable.loading"
      @current-change="onMainCurrentChange"
      @row-dblclick="onMainDoubleClick"
      @selection-change=""
    ></d2-crud>

    <template slot="footer">
      <el-pagination
        @size-change="handleMainSizeChange"
        @current-change="handleMainPageChange"
        :current-page="mainTable.pagination.currentPage"
        :page-sizes="mainTable.pagination.pageSizes"
        :page-size="mainTable.pagination.pageSize"
        :page-count="mainTable.pagination.pageCount"
        :total="mainTable.pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        :background="true"
      >
      </el-pagination>
    </template>

    <dialog-action
      ref="dialog-action"
      @dialog-close="fetchMainData"
      :eventTypeOptions="eventTypeOptions"
      :accountTypeOptions="accountTypeOptions"
      :statusOptions="statusOptions"
      :widhholdTypeOptions="widhholdTypeOptions"
    ></dialog-action>

    <common-export ref="common-export"></common-export>
  </d2-container>
</template>

<script>

import util from '@/libs/util';
import DialogAction from './dialog-action';
import CommonExport from '../../common/export';
import ApiMain from '@/api/mch.account';
import ApiAccountAccessType from '@/api/settle.accountAccessType';

export default {
  name: 'settle-account',
  mixins: [
  ],
  components: {
    'dialog-action': DialogAction,
    'common-export': CommonExport,
  },
  data() {
    return {

      accountTypeOptions: [],
      eventTypeOptions: [],
      widhholdTypeOptions: [],
      statusOptions: util.tool.getStatusOptions(),

      mainQuery: {
        mchNo: '',
        // terNo: '',
      },

      mainQueryRaw: null,
      mainTable: {
        loading: false,
        options: {
          border: true,
          stripe: true,
          highlightCurrentRow: true,
          emptyText: '暂无数据',
          size: 'mini',
        },
        // indexRow: {
        //   title:'序号',
        //   width: "80",
        //   align:'center'
        // },
        indexRow: null,
        allowSelect: false,
        columns: [
          { title: '商户号', key: 'mchNo', align: 'center', showOverflowTooltip: true },
          { title: '商户名称', key: 'mchName', align: 'center', showOverflowTooltip: true },
          { title: '结算币种', key: 'settleCurrency', align: 'center', showOverflowTooltip: true },
          { title: '可用账户总金额', key: 'totalAccountCashAmount', align: 'right', showOverflowTooltip: true, formatter: this.amountFormatter },
          { title: '冻结账户冻结金额', key: 'totalAccountFrozenAmount', align: 'right', showOverflowTooltip: true, formatter: this.amountFormatter },
          // {title: '交易账户', align: 'center', children: [
          //   {title: '总金额', key: 'totalTradeAmount', align: 'right', showOverflowTooltip: true, formatter: this.amountFormatter},
          //   {title: '未结算金额', key: 'tradeUnsettleAmount', align: 'right', showOverflowTooltip: true, formatter: this.amountFormatter},
          //   {title: '冻结金额', key: 'tradeFrozenAmount', align: 'right', showOverflowTooltip: true, formatter: this.amountFormatter},
          //   {title: '可提现金额', key: 'tradeCashAmount', align: 'right', showOverflowTooltip: true, formatter: this.amountFormatter},
          // ]},
          {
            title: '冻结账户', align: 'center', children: [
              { title: '交易订单冻结金额', key: 'tradeFrozenAmount', align: 'right', showOverflowTooltip: true, formatter: this.amountFormatter },
              { title: '保证金冻结金额', key: 'bondFrozenAmount', align: 'right', showOverflowTooltip: true, formatter: this.amountFormatter },
              { title: '事件待审核冻结金额', key: 'eventReviewFrozenAmount', align: 'right', showOverflowTooltip: true, formatter: this.amountFormatter },
              { title: '事件冻结金额', key: 'eventFrozenAmount', align: 'right', showOverflowTooltip: true, formatter: this.amountFormatter },
            ]
          },
        ],
        list: [],
        pagination: {
          currentPage: 1,
          pageSize: 50,
          total: 0,
          pageSizes: [50, 100, 200]
        },
        current: null,
      },

    }
  },
  mounted() {

    this.mainQueryRaw = Object.copy(this.mainQuery);

    var re = this.fetchOptions()
      .finally(() => {
        this.resetMainData();
      });

  },

  methods: {

    amountFormatter(row, col, val, index) {
      return (val / 100).toFixed(2);
    },

    handleSearch() {
      this.mainTable.pagination.currentPage = 1;
      this.fetchMainData();
    },

    renderMainData(re) {
      this.mainTable.list = re.list;
      this.mainTable.pagination.total = re.total;
    },

    handleMainSizeChange(val) {
      this.mainTable.pagination.pageSize = val;
      this.mainTable.pagination.currentPage = 1;
      this.fetchMainData()
    },
    handleMainPageChange(val) {
      this.mainTable.pagination.page = val;
      this.fetchMainData()
    },

    buildMainQuery() {

      var query = {
        page: this.mainTable.pagination.currentPage,
        limit: this.mainTable.pagination.pageSize,
        search: this.mainQuery,
      };

      return query;
    },

    resetMainData() {

      this.mainQuery = Object.copy(this.mainQueryRaw);
      this.fetchMainData();
    },

    async fetchOptions() {

      var re = await ApiMain.getEventTypeOptions();
      this.eventTypeOptions = re;

      var re = await ApiMain.getAccountTypeOptions();

      this.accountTypeOptions = re;
      // var re = await ApiAccountAccessType.getAccessTypeOptions({
      //   page: 1,
      //   limit: 9999,
      //   search: {
      //     isSys: false, // 自定义
      //     type: 1, // 出账
      //   },
      // });
      // this.widhholdTypeOptions = re;

    },

    async fetchMainData() {

      this.mainTable.loading = true;

      try {
        var re = await ApiMain.list(this.buildMainQuery());
        this.renderMainData(re);
      } catch (err) { }


      this.mainTable.loading = false;

    },

    onMainCurrentChange(now, old) {
      this.mainTable.current = now;
    },

    onMainDoubleClick(now) {
      this.mainTable.current = now;
      this.handleAction();
    },

    handleAction() {
      if (!!this.mainTable.current) {
        this.$refs['dialog-action'].show(Object.copy(this.mainTable.current));
      }
    },

    handleExportExcel() {
      this.$refs['common-export'].handleExportExcel(ApiMain, this.mainQuery, true);
    },

  }
}
</script>

<style>
</style>
